<template>
  <el-dialog :visible.sync="visible" custom-class="userDialog-wrapper" :before-close="handleClose">
    <el-form :model="factoryForm" ref="factory_form">
      <div class="userform-content">
        <el-row id="upload_row">
          <el-upload drag
                     ref="upload"
                     :limit=limitNum
                     :auto-upload="false"
                     accept=".xlsx, .xls"
                     :action="UploadUrl()"
                     :before-upload="beforeUploadFile"
                     :on-change="fileChange"
                     :on-exceed="exceedFile"
                     :on-success="handleSuccess"
                     :on-error="handleError"
                     :on-remove="removeFile"
                     :file-list="fileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xlsx或xls文件，且不超过10M</div>
          </el-upload>
        </el-row>
      </div>
    </el-form>
    <div slot="title" style="font-size: 20px; color: #060920">
      配置温湿度
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="el-green-button" @click="submitForm" type="primary">确认</el-button>
      <el-button class="el-red-button" @click="handleClose" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '../../network/request'
export default {
  name: 'ThConfig',
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.visible = this.visibleFlag
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: false,
      factoryForm: {},
      currentFile: null,
      limitNum: 1,
      fileList: []
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    factory_form: { type: Object, required: true }
  },
  methods: {
    handleClose () {
      this.$emit('close-dialog')
    },
    submitForm () {
      // 弹出二次确认框
      this.$confirm('该操作可能会覆盖已有的配置，错误选择需要配置的场站以及错误的文件格式可能造成不可预期的后果，确认上传文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.upload.submit()

        const form = new FormData()
        this.currentFile = this.fileList[0]
        form.append('file', this.currentFile)
        form.append('factory', this.factory_form.identification)
        const baseurl = '/updateCodeBookByExcel'
        request({
          url: baseurl,
          method: 'post',
          data: form
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$emit('close-dialog')
          } else {
            this.visibleFlag = false
            this.$message({
              type: 'error',
              message: '修改失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上传'
        })
      })
    },
    exceedFile (files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
    fileChange (file, fileList) {
      this.fileList.push(file.raw)
    },
    beforeUploadFile (file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx' || extension !== 'xls') {
        this.$message.warning('只能上传后缀是.xlsx, .xls的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    handleSuccess (res, file, fileList) {
      this.$message.success('文件上传成功')
    },
    // eslint-disable-next-line handle-callback-err
    handleError (err, file, fileList) {
      this.$message.error('文件上传失败 请检查文件格式')
    },
    UploadUrl: function () {
      return ''
    },
    removeFile (file, fileList) {
      this.fileList = fileList
      this.$message.success('文件移除成功')
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped>
  .userform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
  >>> .el-dialog__body {
    height: 35vh;
  }
  .small_label{
    font-size: 14px;
  }
  input{
    width: 200px;
    align-content: center;
  }
  #upload_row{
    margin-top: 20px;
    margin-bottom: 1vh;
    display: flex;
    justify-content: center;
  }
</style>
